<template>
  <div>
 <detail-Banner :sightName="sightName" :bannerImg="bannerImg" :imgs="gallaryImgs"></detail-Banner> 
 <detail-Header></detail-Header>
 <div class="content">
   <detail-List :list="categoryList"></detail-List>
 </div>
  </div>
</template>
<script>
import detailBanner from "./components/banner"
import detailHeader from "./components/header"
import detailList from "./components/list"
import axios from "axios"
export default {
   name:"detail",
   components:{
     detailBanner,
     detailHeader,
     detailList
   },
   data(){
     return {
       sightName:"",
       bannerImg:"",
       gallaryImgs:[],
       categoryList:[]
     }
   },
   methods:{
  thisDetailInfo(){
      axios.get("/api/detail.json",{params:{
        id:this.$route.params.id
      }}).then(this.handleGetDataSucc);
    },
    handleGetDataSucc(res){
       res=res.data
       if(res.ret&&res.data){
         const data=res.data
        this.sightName=data.sightName;
        this.bannerImg=data.bannerImg;
        this.gallaryImgs=data.gallaryImgs;
        this.categoryList=data.categoryList
       }
    }
  },
  mounted(){
     this.thisDetailInfo()
   }
}
</script>

<style lang="stylus" scoped>
  .content
   height:50rem
</style>